<template>
  <div>
    <!-- 文件上传 -->
    <div class="upload">
      <h3>文件上传</h3>
      <el-button type="primary" @click="handleUpload" class="btn"
        >上传</el-button
      >
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        drag
        multiple
        :limit="9"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>
    <!-- 文件列表 -->
    <div class="list">
      <h3>文件列表</h3>
      <el-table :data="tabList" height="250" border style="width: 100%">
        <el-table-column prop="name" label="文件名"> </el-table-column>
        <el-table-column prop="url" label="地址"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="primary"
              plain
              size="mini"
              >查看</el-button
            >
            <el-link
              target="_blank"
              :href="scope.row.url"
              :underline="false"
              style="margin-left: 15px"
            >
              <el-button size="mini" type="primary" plain>下载</el-button>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food3.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      tabList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleUpload() {
      console.log("上传");
    },
    handleRemove(file, fileList) {
      this.getData();
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      window.open(file.url);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    getData() {
      this.tabList = [];
      this.tabList = this.fileList;
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleClick(row) {
      console.log(row);
      window.open(row.url);
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  position: relative;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 10px;
  h3 {
    margin-bottom: 5px;
  }
  .upload-demo {
    width: 400px;
  }
  .btn {
    position: absolute;
    top: 34px;
    left: 380px;
  }
}
.list {
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  border-radius: 10px;
  h3 {
    margin-bottom: 5px;
  }
}
</style>